import React, { Component } from 'react'

export default class MouseCatChild extends Component {
  constructor () {
    super()

    this.state = {
      position: {
        x: 0,
        y: 0
      }
    }
  }

  move = e => {
    this.setState({
      position: {
        x: e.clientX,
        y: e.clientY
      }
    })
  }

  componentDidMount () {
    window.addEventListener('mousemove', this.move)
  }

  componentWillUnmount () {
    window.removeEventListener('mousemove', this.move)
  }

  render () {
    return (
      <div>
        {/* 这里面写的就相当于是vue中的slot占位符，等下父组件会用内容替换下面这一块 */}
        {/* {
          // 子传父
          this.props.render(this.state.position)
        } */}
        {
          // 子传父
          this.props.children(this.state.position)
        }
      </div>
    )
  }
}
